<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .score {
      display: flex;
      line-height: 30px;
      align-items: center;
      font-size: 14px;
    }
    .score>span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('./assets/score.png') center center / 16px 16px;
      cursor: pointer;
    }
    .score>span.on {
      background: url('./assets/score-on.png') center center / 16px 16px;
    }
  </style>
</head>
<body>

  <div id="app">
    <h1>售后评价</h1>
    <!-- <qf-score :value='num' @input='num=$event'>配送速度：</qf-score> -->
    <!-- <textarea cols="30" rows="3" :value='desc' @input='desc=$event.target.value'></textarea> -->

    <!-- 自定义组件，除了封装（可维护性），还可以复用（快速开发） -->
    <qf-score v-model.number='speed'>配送速度：</qf-score>
    <qf-score v-model.number='service'>服务质量：</qf-score>
    <qf-score v-model.number='exper'>用户体验：</qf-score>

    <textarea cols="30" rows="3" v-model.lazy='desc'></textarea><br>
    <button @click='submit'>提交</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 1、深入学习v-model指令

    // 1-1 在组件化中，v-model='num' = :value='num' + @input='num=$event'
    // <qf-score v-model='num'></qf-score>
    // <qf-score :value='num' @input='num=$event'></qf-score>

    // 1-2 对 text 和 textarea 文本表单，v-model = :value + @input
    // <input type="text" v-model='name' />
    // <input type="text" :value='name' @input='name=$event.target.value' />

    // 1-3 对 checkbox 和 radio 选择框，v-model = :checked + @change
    // <input type="radio" v-model='gender' />男
    // <input type="radio" v-model='gender' />女
    // <input type="radio" :checked='gender===1' @change='gender=$event.target.value' />
    // <input type="radio" :checked='gender===2' @change='gender=$event.target.value' />

    // 1-4 对 select 下拉框，v-model = :value + @change
    // <select v-model='level'>
    //   <option value=""></option>
    // </select>
    // <select :value='level' @change='level=$event.target.value'>
    //   <option value=""></option>
    // </select>

    // 2、面试题：
    // 什么是组件化？你怎么理解组件化？
    // 你工作中有没有封装比较好的组件？
    // 父子组件之间如何通信？（父传子、子传父）
    // 什么是插槽？什么是具名插槽？

    // 评分组件
    Vue.component('qf-score', {
      template: `
        <div class='score'>
          <slot name='default'></slot>
          <span v-for='i in 5' :class='{on: value>=i}' @click='$emit("input", i)'></span>
          <slot name='xxx'></slot>
        </div>
      `,
      props: {
        value: { type: Number, default: 0 }
      }
    })

    // 根组件（实例对象）
    const app = new Vue({
      el: '#app',
      data: {
        speed: 0,
        service: 0,
        exper: 0,
        desc: ''
      },
      methods: {
        submit () {
          const data = {
            speed: this.speed,
            service: this.service,
            exper: this.exper,
            desc: this.desc
          }
          console.log('提交评价', data)
        }
      }
    })

  </script>

</body>
</html>
